<template>
  <div class="flex items-center justify-between h-screen">
    <div class="w-[300px] bg-gray-100 h-full border-r border-gray-300">
      <div class="h-[93%] overflow-y-auto">
        <CoversationList :items="items" />
      </div>

      <div class="h-[7%] grid grid-cols-2 gap-2 p-2">
        <button
          class="shadow-sm inline-flex items-center justify-center bg-sky-600 text-white hover:bg-sky-700/90 border-1 border-sky-700 h-[32px] py-[8px] px-[15px] text-sm rounded-[4px]">
          <Icon icon="radix-icons:chat-bubble" class="mr-2"/>
          新建聊天
        </button>
        <button
          class="shadow-sm inline-flex items-center justify-center bg-sky-50 text-sky-700 hover:bg-sky-600 hover:text-white  border-1 border-sky-700 h-[32px] py-[8px] px-[15px] text-sm rounded-[4px]">
          <Icon icon="radix-icons:gear" class="mr-2"/>
          应用设置
        </button>
      </div>
    </div>
    <div class="flex-1 h-full">
      <ProviderSelect :items="providers" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ConversationProps, ProviderProps } from './types'
import CoversationList from './components/ConversationList.vue'
import ProviderSelect from './components/ProviderSelect.vue'

// 测试用例数据1
const items: ConversationProps[] = [
  {
    "id": 1,
    "selectedModel": "GPT-3.5-Turbo",
    "title": "什么是光合作用1",
    "createdAt": "2024-07-03",
    "updatedAt": "2024-07-03"
  },
  {
    "id": 2,
    "selectedModel": "GPT-3.5-Turbo",
    "title": "什么是光合作用",
    "createdAt": "2024-07-03",
    "updatedAt": "2024-07-03"
  },
  {
    "id": 3,
    "selectedModel": "GPT-3.5-Turbo",
    "title": "什么是光合作用",
    "createdAt": "2024-07-03",
    "updatedAt": "2024-07-03"
  },
  {
    "id": 4,
    "selectedModel": "GPT-3.5-Turbo",
    "title": "什么是光合作用，你的说法很请正确，理解的很不错",
    "createdAt": "2024-07-03",
    "updatedAt": "2024-07-03"
  }
];

// 测试数据用例2
const providers: ProviderProps[] = [
{
"id": 1,
"name": "文心一言",
"desc": "文心一言 百度出品的大模型",
"models": ["ERNIE-4.0-8K", "ERNIE-3.5-8K", "ERNIE-Speed-8K"],
"avatar": "https://qph.cf2.poecdn.net/main-thumb-pb-3004-50-jougqzjtwfqyqprixbdwofvnwatmtrg.jpg",
"createdAt": "2024-07-03",
"updatedAt": "2024-07-03"
},
{
"id": 2,
"name": "通义千问",
"desc": "通义千问",
"models": ["qwen-turbo", "qwen-plus", "qwen-max"],
"avatar": "https://qph.cf2.poecdn.net/main-thumb-pb-3004-50-jougqzjtwfqyqprixbdwofvnwatmtrg.jpg",
"createdAt": "2024-07-03",
"updatedAt": "2024-07-03"
}
];

</script>